<template>
	<div class="main">
		<el-container class="main-content">
			<el-aside :width="isCollapse ? '60px' : '210px'">
				<!-- 左侧菜单，isCollapse菜单是否整体展开 -->
				<nav-menu :isCollapse="isCollapse" />
			</el-aside>
			<el-container class="page">
				<!-- 顶部header -->
				<el-header class="page-header">
					<nav-header @fold-change="handleFoldChange" />
				</el-header>
				<!-- 主要内容展示 -->
				<el-main class="page-content">
					<div class="page-info">
						<router-view></router-view>
					</div>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script setup lang="ts">
import NavMenu from '@/components/nav-menu'
import NavHeader from '@/components/nav-header'
import { ref } from 'vue'

const isCollapse = ref(false)
const handleFoldChange = (isFold: boolean) => {
	isCollapse.value = isFold
}
</script>
<style scoped lang="less">
.main {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.main-content,
.page {
	height: 100%;
}

.page-content {
	height: calc(100% - 48px);
	.page-info {
		background-color: #fff;
		border-radius: 5px;
	}
}

.el-header,
.el-footer {
	display: flex;
	color: #333;
	text-align: center;
	align-items: center;
}

.el-header {
	height: 48px !important;
}

.el-aside {
	overflow-x: hidden;
	overflow-y: auto;
	line-height: 200px;
	text-align: left;
	cursor: pointer;
	background-color: #001529;
	transition: width 0.3s linear;
	scrollbar-width: none; /* firefox */
	-ms-overflow-style: none; /* IE 10+ */

	&::-webkit-scrollbar {
		display: none;
	}
}

.el-main {
	color: #333;
	text-align: center;
	background-color: #f0f2f5;
}
</style>
